<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CCLUB视频面试</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="../js/ckplayer/ckplayer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .el-a-style{
            text-decoration:none;
            font-size:14px;
            color:#8b8f94;
        }
        .img:hover{
            width:45px;
            height:45px;
        }
        .message{
            background-color: white;
            border-bottom-color: white;
            /*为了给after伪元素自动继承*/
            font-size: 12px;
            line-height: 18px;
            padding: 5px 12px 5px 12px;
            box-sizing: border-box;
            border-radius: 6px;
            position: relative;
            word-break: break-all;
        }
        /** 通过对小正方形旋转45度解决 **/
        .message::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -5px;
            width: 10px;
            height: 10px;
            margin-top: -10px;
            background: inherit;
            /*自动继承父元素的背景*/
            transform: rotate(45deg);
        }
        .el-interview_time{
            font-size:24px;
            color:dodgerblue;
            font-weight:700;
        }
    </style>
</head>
<body>
<div style="float:left;margin-left:150px;margin-top:90px;">
    <div style="width:960px;height:580px;margin-top:-20px;">
        <!--代码输入框（注意请务必设置高度，否则无法显示）-->
        <pre id="code" class="ace_editor" style="min-height:580px">
            <textarea class="ace_text-input" style="background-color:rgb(200,200,200)" id="codeText">
//在下方编辑代码
            </textarea>
        </pre>
    </div>
</div>
<div id="app">
    <div style="width:100%;height:40px;">
        <div style="padding-top:10px;">
            <span style="font-size:24px;margin-left:-1100px;">{{name}}</span>
            <span style="margin-left:360px;">面试持续时间:</span>
            <span v-if="hour>=10" style="margin-left:10px;" class="el-interview_time">{{hour}}:</span>
            <span v-if="hour<10" style="margin-left:10px;" class="el-interview_time">0{{hour}}:</span>
            <span v-if="minute>=10" class="el-interview_time">{{minute}}:</span>
            <span v-if="minute<10" class="el-interview_time">0{{minute}}:</span>
            <span v-if="second>=10" class="el-interview_time">{{second}}</span>
            <span v-if="second<10" class="el-interview_time">0{{second}}</span>
            <span style="margin-left:450px;"><a href="javascript:void(0);" class="el-a-style">设备检测</a></span>
            <span style="margin-left:30px;"><a href="javascript:void(0);" class="el-a-style">帮助中心</a></span>
        </div>
    </div>
    <el-divider></el-divider>
    <div>
        <div style="float:left;">
            <div style="">
                <div id="video1" style="width:280px;height:180px"></div>
            </div>
            <div style="width:280px;height:350px;background-color:rgb(240,240,240);" id="chatContent">
                <div class="panel-body" style="overflow:scroll;width:280px;height:350px;">
                    <div style="border: 1px  #000000; width: 90%; margin: 0 auto;">
                        <div  style="padding-top:5px;" v-if="chatContent.length>0">
                            <div style="float:left;">
                                <div style="font-size:12px;color:rgb(100,100,100)" v-if="chatContent[0].from_user==='candidate'">候选人</div>
                                <div style="font-size:12px;color:rgb(100,100,100)" v-if="chatContent[0].from_user==='judge'">面试官</div>
                                <div><img src="../img/headChat.png" alt="" width="30px" height="30px"></div>
                            </div>
                            <div class="message" style="width:160px;float:left;margin-left:15px;margin-top:5px;" :style="{'color':(chatContent[0].from_user==='judge' ? 'red':'cornflowerblue')}">
                                {{chatContent[0].chat_content}}
                            </div>
                        </div>
                        <div v-for="(item,index) in chatContent" :style="{'padding-top':length[index-1]+'px'}" v-if="index > 0">
                            <div style="float:left;">
                                <div style="font-size:12px;color:rgb(100,100,100)" v-if="chatContent[index].from_user==='candidate'">候选人</div>
                                <div style="font-size:12px;color:rgb(100,100,100)" v-if="chatContent[index].from_user==='judge'">面试官</div>
                                <div><img src="../img/headChat.png" alt="" width="30px" height="30px"></div>
                            </div>
                            <div class="message" style="width:160px;float:left;margin-left:15px;margin-top:5px;" :style="{'color':(chatContent[index].from_user==='judge' ? 'red':'cornflowerblue')}">
                                {{item.chat_content}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width:280px;height:50px;background-color:rgb(60,60,60)">
                <div style="float:left;">
                    <el-input v-model="input" placeholder="请输入内容" style="width:210px;padding-top:5px;">
                    </el-input>
                </div>
                <div style="float:left;margin-top:5px;"><el-button type="primary" @click="sendChatContent">发送</el-button></div>
            </div>
        </div>
    </div>
    <div style="margin-top:630px;margin-left:160px;">
        <div style="float:left;">
            <el-tooltip class="item" effect="dark" content="候选人信息" placement="top-start" slot="reference" v-if="interviewInfo.interview_create_user_id==='judge'">
                <a href="javascript:void(0);" @click="openCandidateInfo">
                    <img src="../img/candidate_info.png" alt="" width="30px" height="30px">
                </a>
            </el-tooltip>
        </div>
        <div style="float:left;margin-left:15px;">
            <el-tooltip class="item" effect="dark" content="添加面试评价" placement="top-start" v-if="interviewInfo.interview_create_user_id==='judge'">
                <a href="javascript:void(0);" @click="dialogVisible_remarks_interview=true">
                    <img src="../img/edit.png" alt="" width="30px" height="30px">
                </a>
            </el-tooltip>
        </div>
        <div style="float:left;margin-left:400px;">
            <a href="javascript:void(0);" @click="changeVolume">
                <img :src="volumeImg" alt="" width="40px" height="40px" class="img">
            </a>
        </div>
        <div style="float:left;margin-left:15px;">
            <a href="javascript:void(0);" @click="changeVedio">
                <img :src="vedioImg" alt="" width="40px" height="40px" class="img">
            </a>
        </div>
        <div style="float:left;margin-left:15px;">
            <a href="javascript:void(0);" @click="breakInterview">
                <img src="../img/break.png" alt="" width="40px" height="40px" class="img">
            </a>
        </div>
        <div style="float:left;margin-left:370px;" v-if="interviewInfo.interview_create_user_id==='candidate'">
            <a href="javascript:void(0);" @click="websocketSendCode">
                <i class="el-icon-refresh" style="font-size:30px;" title="同步代码给面试官"></i>
            </a>
        </div>
    </div>
    <!--备注面试-->
    <el-dialog title="面试反馈" :visible.sync="dialogVisible_remarks_interview" width="30%" before-close="handleClose">
        <el-form  label-width="0px">
            <el-form-item style="margin-top:-20px;">
                <p>结果</p>
                <p style="font-size:13px;color:#8b8f94;margin-top:-30px;">请给出候选人的面试结果</p>
            </el-form-item>
            <el-form-item style="margin-top:-45px;">
                <template>
                    <el-radio v-model="remarks.radio" label="1">通过</el-radio>
                    <el-radio v-model="remarks.radio" label="2">拒绝</el-radio>
                    <el-radio v-model="remarks.radio" label="3">待定</el-radio>
                </template>
            </el-form-item>
            <el-form-item style="margin-top:-25px;">
                <p>综合评价</p>
                <p style="font-size:13px;color:#8b8f94;margin-top:-30px;">请详细说明候选人的优势、不足及任何值得注意的方面</p>
            </el-form-item>
            <el-form-item style="margin-top:-30px;">
                <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="remarks.textarea">
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible_remarks_interview = false">取 消</el-button>
            <el-button type="primary" @click="setInterviewRemarks">确 定</el-button>
        </span>
    </el-dialog>
</div>
</body>
<script>
    //初始化对象
    editor = ace.edit("code");

    //设置风格和语言（更多风格和语言，请到github上相应目录查看）
    theme = "clouds"
    language = "java"
    editor.setTheme("ace/theme/" + theme);
    editor.session.setMode("ace/mode/" + language);

    //字体大小
    editor.setFontSize(18);

    //设置只读（true时只读，用于展示代码）
    editor.setReadOnly(false);

    //自动换行,设置为off关闭
    editor.setOption("wrap", "free")

    //启用提示菜单
    ace.require("ace/ext/language_tools");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });
</script>
<script>
    new Vue({
        el :'#app',
        data:{
            name: 'CCLUB 视频面试',
            input: '',
            interviewInfo: {},
            dialogVisible_remarks_interview: false,
            remarks:{
                radio: '',
                textarea: ''
            },
            volumeImg: '../img/volume_open.png',
            vedioImg: '../img/vedio_open.png',
            chatContent:[],
            length:[],
            websocket: null,
            chat:{
                interview_id: '',
                type: '',
                chat_content: '',
                from_user: ''
            },
            recorder: '',
            hour: 0,
            minute: 0,
            second: 0
        },
        created() {
            this.init();
            this.getOneInterviewInfo();
            this.handleTime();
        },
        methods: {
            async init() {
                var vedioObject1={
                    container: '#video1',
                    variable: 'player',
                    autoplay: true,
                    live: true,
                    video: 'rtmp://127.0.0.1:1935/live/home1'
                }
                var player1=new ckplayer(vedioObject1);
            },
            openCandidateInfo(){
                this.candidateInfo='';
                this.getCandidateInfo();
                this.$notify({
                    title: '候选人信息',
                    message: this.candidateInfo,
                    duration: 0,
                    position: 'bottom-left',
                    dangerouslyUseHTMLString: true
                });
            },
            getCandidateInfo(){
                this.candidateInfo+=('面试时间'+'&nbsp;&nbsp;&nbsp;'+this.interviewInfo.interview_begin_time+'</br>');
                this.candidateInfo+=('公司'+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+this.interviewInfo.interview_company_name+'</br>');
                this.candidateInfo+=('应聘职位'+'&nbsp;&nbsp;&nbsp;'+this.interviewInfo.interview_candidate_position+'</br>');
                this.candidateInfo+=('候选人'+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+this.interviewInfo.interview_candidate_name+'</br>');
                this.candidateInfo+=('手机号'+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+this.interviewInfo.interview_candidate_phone+'</br>');
                this.candidateInfo+=('邮箱'+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+this.interviewInfo.interview_candidate_mail+'</br>');
            },
            async setInterviewRemarks(){
                let result=await axios.get('/setInterviewRemarks?interview_id='+this.interviewInfo.interview_id+'&state='+this.remarks.radio+'&content='+this.remarks.textarea);
                if(result.data===1){
                    this.$message({
                        type: 'success',
                        message: '备注候选人面试信息成功'
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: '备注候选人面试信息失败'
                    });
                }
                this.dialogVisible_remarks_interview=false;
                this.getMyCreateInterviewRemarksList();
            },
            changeVolume(){
                if(this.volumeImg==='../img/volume_open.png'){
                    this.volumeImg='../img/volume_close.png';
                }else{
                    this.volumeImg='../img/volume_open.png';
                }
            },
            changeVedio(){
                if(this.vedioImg==='../img/vedio_open.png'){
                    this.vedioImg='../img/vedio_close.png';
                }else{
                    this.vedioImg='../img/vedio_open.png';
                }
            },
            breakInterview(){
                if(this.interviewInfo.interview_create_user_id==='candidate'&&this.interviewInfo.interview_recording===1){
                    this.vedioStop();
                }
                let location=window.location.href.split("/");
                this.$confirm('是否确认结束当前面试?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '结束面试成功!'
                    });
                    axios.get('/end_Interview_State?interview_id='+this.interviewInfo.interview_id+'&interview_state='+'33');
                    window.location.href="/test_interview_end/"+location[location.length-1];
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消结束当前面试'
                    });
                });
            },
            sendChatContent(){
                this.websocketSendChat();
            },
            async getOneInterviewInfo(){
                let location=window.location.href.split("/");
                let interview_code=location[location.length-1];
                let result=await axios.get('/getOneInterviewInfo?interview_code='+interview_code);
                this.interviewInfo=result.data;
                this.websocket=new WebSocket("ws://localhost:8080/test/one/"+this.interviewInfo.interview_id);
                this.websocket.onmessage=this.getMessage;
                this.chat.interview_id=this.interviewInfo.interview_id;
                this.chat.from_user=this.interviewInfo.interview_create_user_id;
                this.getOneInterviewRemarks();
                if(this.interviewInfo.interview_recording===1){
                    this.vedioStart();
                }
            },
            getMessage(msg){
                editor2 = ace.edit("code");
                let obj=new Object();
                let json=JSON.parse(msg.data);
                obj.chat_content=json.chat_content;
                obj.from_user=json.from_user;
                obj.type=json.type;
                if(obj.type==='code'){
                    editor2.setValue(obj.chat_content);
                }else if(obj.type==='chat'){
                    this.chatContent.push(obj);
                    this.input='';
                    if(this.chatContent.length>1){
                        console.log(this.chatContent[this.length.length].chat_content.length);
                        this.length.push((this.chatContent[this.length.length].chat_content.length/15)*10+50)
                    }
                }
            },
            websocketSendChat(){
                this.chat.chat_content=this.input;
                this.chat.from_user=this.interviewInfo.interview_create_user_id
                this.chat.type='chat';
                this.websocket.send(JSON.stringify(this.chat));
            },
            websocketSendCode(){
                this.$message({
                    message: '成功将代码同步给面试官',
                    type: 'success'
                });
                editor1 = ace.edit("code");
                this.chat.chat_content=editor1.getValue();
                this.chat.type='code';
                this.chat.from_user=this.interviewInfo.interview_create_user_id;
                this.websocket.send(JSON.stringify(this.chat));
            },
            async getOneInterviewRemarks(){
                console.log(this.interviewInfo.interview_id);
                let result=await axios.get('/getOneInterviewRemarks?interview_id='+this.interviewInfo.interview_id);
                this.remarks.radio=result.data.remarks_state;
                this.remarks.textarea=result.data.remarks_content;
            },
            vedioStart(){
                navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
                    .then((stream) => {
                        this.recorder = new MediaRecorder(stream);
                        this.recorder.ondataavailable = (event) => {
                            console.log(event.data);
                            this.saveInterviewRecording(event.data);
                        };
                        this.recorder.start();
                    });
            },
            vedioStop(){
                this.recorder.stop();
            },
            async saveInterviewRecording(data){
                let params=new FormData();
                params.append("interview_id",this.interviewInfo.interview_id);
                params.append("video",data);
                params.append("interview_time_length",this.timeUtils());
                let result=await axios({
                    method: 'post',
                    url: '/saveInterviewRecording',
                    data: params,
                    headers:{
                        "Content-Type": "multipart/form-data"
                    }
                });
            },
            handleTime(){
                let timer=setInterval(() => {
                    if(this.second===59){
                        this.second=0;
                        this.minute++;
                    }else{
                        this.second++;
                    }
                    if(this.minute===59){
                        this.hour++;
                        this.minute=0;
                    }
                }, 1000);
            },
            timeUtils(){
                let time='';
                if(this.hour!=0){
                    time+=(this.hour+"小时");
                }
                if(this.minute!=0){
                    time+=(this.minute+"分钟");
                }
                if(this.second!=0){
                    time+=(this.second+"秒");
                }
                return time;
            }
        }
    })
</script>
</html>